<template>
	<!-- 签到 -->
	<view class="qian_dao">
		<view
			style="font-size: 400rpx;color: #24C789;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);z-index: 1;opacity: 0.1;">
			{{ monthBg }}</view>
		<view class="header dis_f_sb_c">
			<view class="left dis_f_c_c" @click.stop="date_change('last')">
				<image src="@/static/new/blessingPoints/last-month.png" style="width: 52rpx;height: 52rpx;"></image>
			</view>
			<view class="center picker_btn">
				<text style="color: #FF8833;font-size: 40rpx;">{{ date_info.n }}年{{ date_info.y }}月</text>
				<picker mode="date" fields="month" :value="date_info.ny" :start="startDate" :end="endDate"
					@change="date_change_fun">
					<text></text>
				</picker>
			</view>
			<view class="right dis_f_c_c false" v-if="today.ny == date_info.ny">
				<image src="@/static/new/blessingPoints/nexted-month.png" style="width: 52rpx;height: 52rpx;"></image>
			</view>
			<view class="right dis_f_c_c" @click.stop="date_change('next')" v-else>
				<image src="@/static/new/blessingPoints/next-month.png" style="width: 52rpx;height: 52rpx;"></image>
			</view>
		</view>
		<view class="section">
			<!-- 周，星期 -->
			<view class="weeks dis_f_c_c">
				<view class="weeks_ul dis_f_c_c">
					<block v-for="(week, index) in weeks" :key="index">
						<view class="weeks_li dis_f_c_c box">
							<text>{{ week }}</text>
						</view>
					</block>
				</view>
			</view>
			<!-- 天 -->
			<view class="days dis_f_c_c">
				<view class="ul">
					<view class="li dis_f_c_c" v-for="(li, li_index) in days" :key="li_index">
						<block v-for="(day, index) in li" :key="index">
							<!-- 上月和下月 -->
							<template v-if="day.type == 'last_month' || day.type == 'next_month'">
								<view class="day dis_f_c_c box" :class="[day.type]">
									<text>{{ day.r }}</text>
								</view>
							</template>
							<!-- 当前月 -->
							<template v-else>
								<view class="day dis_f_co_c_c box"
									:class="{ 'true': day.click, 'today': day.nyr == today.nyr, 'miss': day.isMiss, 'current-month': true }"
									@click.stop="list_fun(day)">
									<text>{{ day.r }}</text>
									<text v-if="day.click" class="score-num">
										+{{ day.data.score }}
									</text>
									<text v-else-if="day.isMiss" class="score-num">
										+{{ 0 }}
									</text>
								</view>
							</template>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import dayjs from 'dayjs'
import isSameOrBefore from '@/node_modules/dayjs/plugin/isSameOrBefore'
dayjs.extend(isSameOrBefore)
export default {
	props: {
		// 签到的日期列表
		list: {
			type: Array,
			default: Array
		},
		// 当前年月YYYY-MM
		date: {
			type: String,
			default: "",
		},
		// 存放时间的key
		time_key: {
			type: String,
			default: "",
		},
		ruleJson: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			// 周，星期
			weeks: ["一", "二", "三", "四", "五", "六", "日"],

			// 今天的时间信息
			today: {},
			// 当前date的时间信息
			date_info: {},

			// 当前月的列表数据
			days: [],
		};
	},
	created() {
		// 获取今天的时间信息
		this.get_today_fun();
	},
	methods: {
		// 获取当前系统时间的年月日
		get_today_fun() {
			let date = new Date();
			let n = date.getFullYear(),
				y = date.getMonth() + 1,
				r = date.getDate();
			y = this.get_str(y);
			r = this.get_str(r);
			this.today = {
				n: n,
				y: y,
				r: r,
				ny: n + "-" + y,
				nyr: n + "-" + y + "-" + r,
			}

			// 获取当前月的列表数据
			this.get_days_fun();
		},
		// 获取列表数据
		get_days_fun() {
			// 当前日
			const today = dayjs().format('D')
			// 当前日期
			let date = this.date || this.today.ny;
			let date_arr = date.split("-");

			// 当前年月
			let n = date_arr[0],
				y = date_arr[1];

			// 当前date的时间信息
			this.date_info = {
				n: n,
				y: y,
				ny: date,
			}

			// 存放数据的列表
			let days = [];

			// 获取上月的数据
			days = this.get_last_month_fun(days, n, y - 1);

			// 获取这月的数据
			days = this.get_this_month_fun(days, n, y - 1);

			// 获取下月的数据
			days = this.get_next_month_fun(days, n, y - 1);

			// 对数据进行处理，七个一组
			let list = [];
			let arr = [];
			let index = 0;
			days.forEach((obj, i) => {
				arr.push(obj);
				index++;
				if (index == 7) {
					list.push(arr);
					arr = [];
					index = 0;
				}
			});
			this.days = list;
		},
		// 获取上月的日期
		get_last_month_fun(list_days, n, y) {
			// 获取当前月份第一天是周几
			let week = new Date(n, y, 1).getDay();
			// 如果不是周一，说明需要上月的天数补齐
			if (week != 1) {
				week = week === 0 ? 7 : week;
				// 计算需要补齐的天数
				let number = week - 1;
				// 获取上月的天数（当天数为0 js自动处理为上一月的最后一天）
				let days = y == 0 ? 31 : new Date(n, y, 0).getDate()
				y = this.get_str(y);
				for (var i = days - number + 1; i <= days; i++) {
					let r = i;
					list_days.push({
						r: r,
						type: "last_month",
					})
				}
			}
			return list_days;
		},
		// 获取这月的数据
		get_this_month_fun(list_days, n, y) {
			// 当天日
			const today = dayjs().format('D')
			// 当月
			const month = dayjs().format('M')
			// 当年
			const year = dayjs().format('YYYY')

			y = y + 1;
			// 获取这月的天数（当天数为0 js自动处理为上一月的最后一天）
			let days = new Date(n, y, 0).getDate();
			y = this.get_str(y);
			for (var i = 1; i <= days; i++) {
				let r = this.get_str(i);
				let nyr = n + "-" + y + "-" + r;
				let yr = y + "-" + r;
				let click = false;
				// 获取已经签到的列表
				let list = this.list;
				// console.log('获取已经签到的列表',list);
				// 这天的数据
				let data = "";
				// 如果有数据
				if (list.length) {
					// 如果有符合条件的
					for (let j = 0; j < list.length; j++) {
						// 存放时间的key
						let key = this.time_key;
						let obj = list[j];
						if (key) {
							if (obj[key] == r || obj[key] == yr || obj[key] == nyr) {
								click = true;
								// 如果有key值，说明数据中需要其他字段，直接将数据赋值到这天的data中
								data = obj;
								break;
							}
						} else {
							if (obj == r || obj == yr || obj == nyr) {
								click = true;
								data = obj;
								break;
							}
						}

					}
				}

				// 判断是否漏签
				let isMiss = false
				if (!click) {
					if (n < year || Number(y) < month || r - 0 < today) {
						isMiss = true
					}
				}
				list_days.push({
					nyr: nyr,
					yr: yr,
					r: r,
					type: "this_month",
					click: click,
					data: data,
					isMiss
				})
			}
			return list_days;
		},
		// 获取下月的日期
		get_next_month_fun(list_days, n, y) {
			// 获取这月的天数（当天数为0 js自动处理为上一月的最后一天）
			let days = new Date(n, y + 1, 0).getDate();
			// 获取当前月份最后一天是周几
			let week = new Date(n, y, days).getDay();
			// 如果不是周日
			if (week !== 0) {
				let number = 7 - week;
				y = y + 2;
				y = this.get_str(y);
				for (var i = 1; i <= number; i++) {
					let r = this.get_str(i);
					list_days.push({
						r: r,
						type: "next_month",
					})
				}
			}
			return list_days;
		},
		// 日期改变时触发
		date_change(type) {
			// 当前date的时间信息
			let date_info = this.date_info;
			let n = date_info.n - 0,
				y = date_info.y - 0;
			if (type == "last") {
				if (y == 1) {
					n -= 1;
					y = 12;
				} else {
					y = this.get_str(y - 1);
				}
			} else {
				if (y == 12) {
					n += 1;
					y = "01";
				} else {
					y = this.get_str(y + 1);
				}
			}
			let ny = n + "-" + y;
			this.$emit('date_change', ny);
		},
		// 日期改变时触发
		date_change_fun(e) {
			let date = e.target.value;
			this.$emit('date_change', date);
		},
		// 获取字符串，小于10的时候前面加上0
		get_str(num) {
			num = num - 0;
			return num < 10 ? '0' + num : '' + num;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year;
			}
			month = month > 9 ? month : '0' + month;;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 列表的点击事件
		list_fun(item) {
			if (item.nyr == this.today.nyr) {
				item.type = "today";
			}
			// 点击的时间戳
			let item_time = new Date(item.nyr.replace(/\-/g, '/')).getTime();
			// 当前的时间戳
			let active_time = new Date().getTime();
			// 只有当点击的时间戳小于或等于当前的时候才能签到
			if (item_time <= active_time) {
				this.$emit("day_change", item);
			}
		}
	},
	watch: {
		// 当前日期改变时触发
		date(date) {
			// 获取列表数据
			this.get_days_fun();
		},
		// 签到列表更新时触发
		list(list) {
			let ul = JSON.parse(JSON.stringify(this.days));
			ul.forEach((li) => {
				li.forEach((item, i) => {
					// 这天的数据
					let data = {};
					let click = false;
					// 如果有数据
					if (list.length) {
						// 如果有符合条件的
						for (let j = 0; j < list.length; j++) {
							// 存放时间的key
							let key = this.time_key;
							let obj = list[j];
							if (key) {
								if (obj[key] == item.r || obj[key] == item.yr || obj[key] == item.nyr) {
									click = true;
									// 如果有key值，说明数据中需要其他字段，直接将数据赋值到这天的data中
									data = obj;
									break;
								}
							} else {
								if (obj == item.r || obj == item.yr || obj == item.nyr) {
									click = true;
									data = obj;
									break;
								}
							}
						}
					}
					item.click = click;
					item.data = data;
				})
			});
			this.days = ul;
		},
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
		monthBg() {
			return dayjs(this.date).format('MM')
		}
	},
}
</script>

<style lang="scss" scoped>
.box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.dis_f_sb_c {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dis_f_c_c {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8rpx;
}

.dis_f_co_c_c {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* 将picker作为隐藏按钮的样式 */
.picker_btn {
	position: relative;
}

.picker_btn picker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.picker_btn picker text,
.picker_btn picker view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.qian_dao {
	position: relative;

	.header {
		height: 90rpx;

		.left,
		.right {
			font-size: 30rpx;
			height: 100%;
			padding: 0 30rpx;

			&.false {
				color: #ccc;
			}
		}

		.center {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.section {
		.weeks {
			.weeks_ul {
				// border-right: 1px solid #f0f0f0;

				.weeks_li {
					width: 92rpx;
					font-size: 24upx;
					color: #333;
					height: 70rpx;
					// border-top: 1px solid #f0f0f0;
					// border-left: 1px solid #f0f0f0;

					&:last-child {
						border-right: none;
					}
				}
			}
		}

		.days {
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;

			.ul {
				// border-right: 1px solid #f0f0f0;
				// border-bottom: 1px solid #f0f0f0;

				.current-month {
					.score-num {
						display: block;
						font-size: 20rpx;
						font-weight: lighter;
						color: #FF8833;
						margin-top: 8rpx;
					}
				}


				.day {
					width: 92rpx;
					height: 126rpx;
					font-size: 26upx;
					color: #323232;
					position: relative;
					// border-top: 1px solid #f0f0f0;
					// border-left: 1px solid #f0f0f0;

					&.last_month,
					&.next_month {
						color: #ccc;
					}

					&.today {
						// color: red;
						// background: #4CD964;
					}

					&.miss {
						background: #F2F3F3;
						border-radius: 16rpx;

						&::before {
							content: '漏签';
							display: block;
							font-size: 16rpx;
							color: #fff;
							padding: 4rpx 6rpx;
							background: #999999;
							border-radius: 4rpx;
						}

						&::after {
							color: #C9C9C9;
						}
					}

					&.true {
						background: #24C789;
						border-radius: 16rpx;
						color: #fff;

						&::before {
							content: '已签';
							display: block;
							font-size: 16rpx;
							color: #24C789;
							padding: 4rpx 6rpx;
							background: #FFDF99;
							border-radius: 4rpx;
						}

						&::after {
							color: #fff;
						}
					}
				}
			}
		}
	}
}
</style>
